<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>检查LocalStorage</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; max-width: 800px; margin: 0 auto; }
        pre { background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto; }
        .highlight { color: #e74c3c; font-weight: bold; }
    </style>
</head>
<body>
    <h1>LocalStorage 内容检查</h1>
    
    <h2>全部存储项：</h2>
    <pre id="all-items"></pre>
    
    <h2>userInfo 详细内容：</h2>
    <pre id="user-info"></pre>
    
    <h2>user 详细内容：</h2>
    <pre id="user-item"></pre>
    
    <h2>token 内容：</h2>
    <pre id="token-item"></pre>
    
    <script>
        // 显示所有localStorage项
        function showAllItems() {
            const output = document.getElementById('all-items');
            let html = '';
            
            for (let i = 0; i < localStorage.length; i++) {
                const key = localStorage.key(i);
                const value = localStorage.getItem(key);
                html += `键: <span class="highlight">${key}</span>, 值: ${value}\n`;
            }
            
            output.textContent = html;
        }
        
        // 显示特定项的详细内容
        function showItemDetails(key, elementId) {
            const output = document.getElementById(elementId);
            const value = localStorage.getItem(key);
            
            if (!value) {
                output.textContent = `未找到键: ${key}`;
                return;
            }
            
            try {
                // 尝试解析为JSON
                const parsed = JSON.parse(value);
                output.textContent = JSON.stringify(parsed, null, 2);
            } catch (e) {
                output.textContent = value;
            }
        }
        
        // 执行检查
        showAllItems();
        showItemDetails('userInfo', 'user-info');
        showItemDetails('user', 'user-item');
        showItemDetails('token', 'token-item');
        
        // 模拟评论场景的用户检查逻辑
        const userInfo = localStorage.getItem('userInfo');
        const user = localStorage.getItem('user');
        const token = localStorage.getItem('token');
        
        console.log('--- 用户信息检查 ---');
        console.log('userInfo存在:', !!userInfo);
        console.log('user存在:', !!user);
        console.log('token存在:', !!token);
        
        if (userInfo) {
            try {
                const parsedUserInfo = JSON.parse(userInfo);
                console.log('userInfo解析结果:', parsedUserInfo);
                console.log('userInfo包含的字段:', Object.keys(parsedUserInfo));
            } catch (e) {
                console.error('解析userInfo失败:', e);
            }
        }
        
        // 提示用户
        alert('请查看浏览器控制台的输出信息，有助于排查删除按钮不显示的问题');
    </script>
</body>
</html>